<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘制单通道图片-上传图片</title>
	</head>
	<body>
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title></title>
				<style type="text/css">
					.inputoutput {
						width: 160;
						height: 160;
						border: aliceblue 0.0625rem solid;
					}
					#imageSrc{
						width: 160;
						height: 160;
						border: darkgray 0.0625rem solid;
					}
					/* #img{
						width: 115px;
						height: 100px;
					} */
				</style>
			</head>
			<body>
				<h2>该案例是实现单通道资源图片的展示，例如ir图或深度图，不是正常的rgba图片在极速模式下的浏览器无法显示的问题。</h2>
				<h6>实现方式是将上传一个单通道图片，获取该图片的内容信息后补齐其他通道值再重新绘制到画布上的做法。</h6>
				<h6>涉及文件：仅当前文本</h6>
				<div>
					<div class="inputoutput">
						<img id="imageSrc" alt="No Image" />
						<div class="caption">上传图片： <input type="file" id="file" name="file" /></div>
					</div>
					<div class="inputoutput">
						图片展示：<img src="" id="img">
						画布绘制结果： <canvas id="canvasOutput"></canvas>
					</div>
				</div>
		
				<script type="text/javascript">
					let imgElement = document.getElementById("imageSrc");
					let inputElement = document.getElementById("file");
					inputElement.addEventListener("change", function(e) {
						imgElement.src = URL.createObjectURL(e.target.files[0]);
					}, true);
					window.onload = function() {
						var f = document.getElementById("file");
						f.onchange = function() {
							//获取文件对象 
							console.log('dddd', this.files);
							var file = this.files[0];
							//使用fileReader对文件对象进行操作 
							var reader = new FileReader();
		
							reader.readAsArrayBuffer(file);
							console.log("打file的值", file);
							let that = this
							reader.onload = function() {
								console.log("readAsArrayBuffer:", reader.result);
								var data = new Uint8Array(reader.result);
								console.log("打印Uint8Array的值", data);
		
								var canvas = document.getElementById("canvasOutput");
								var ctx = canvas.getContext("2d");
		
								let img_w = data[18] + data[19] * 256 + data[20] * 1024 + data[21] * 2048;
								let img_h = data[22] + data[23] * 256 + data[24] * 1024 + data[25] * 2048;
								console.log('img_w:', img_w);
								console.log('img_h:', img_h);
								ctx.drawImage(imgElement, 0, 0, img_w, img_h);
								var pixels = ctx.getImageData(0, 0, img_w, img_h);
								var line = 0;
								let rgb_un8 = new Uint8Array(img_w * img_h);
								for (let idx = img_h - 1; idx >= 0; idx--) {
									for (let idy = 0; idy < img_w; idy++) {
										rgb_un8[idx * img_w + idy] = data[1078 + line * img_w + idy]
									}
									line++
								}
		
								for (var i = 0, j = 0; j < rgb_un8.length; j++, i += 4) {
									pixels.data[i] = rgb_un8[j]
									pixels.data[i + 1] = rgb_un8[j]
									pixels.data[i + 2] = rgb_un8[j]
									pixels.data[i + 3] = 255
								}
								console.log('data new:', rgb_un8);
								ctx.putImageData(pixels, 0, 0); //更改像素点
								console.log('pixels', pixels);
								setTimeout(function() {
									let imgElement = document.getElementById("img");
									var dataURL = canvas.toDataURL("image/jpg");
									imgElement.src = dataURL;
									console.log('==dataURL=========', dataURL)
								}, 500)
							}
		
						}
					}
				</script>
		
			</body>
		</html>
		
	</body>
</html>
